<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title> 
        <link rel="stylesheet" type="text/css" media="screen and (min-width: 900px),only screen and (min-device-width： 900px)" href="css/index.css"/>
        <link rel="stylesheet" type="text/css" media="screen and (max-width: 900px),only screen and （max-device-width： 900px）" href="css/index_change.css"/>
</head>

<body>
        <div class="left">
                <h2>
                        <img src="img/logo.jpg" alt="">
                        <span>Rukada Admin</span>
                </h2>
                <ul>
                        <li class="li_one">MAIN NAVIGATION</li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-1.jpg" alt="">
                                        <span>Dashboard</span>
                                </div>
                                <img src="img/xiaojiantu.jpg" alt="">
                        </li>
                        <li class="li_one">LABELS</li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-2.jpg" alt="">
                                        <span>Important</span>
                                </div>
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-2.jpg" alt="">
                                        <span>Important</span>
                                </div>
                        </li>
                        <li>
                                <div class="left_he">
                                        <img src="img/img-2.jpg" alt="">
                                        <span>Important</span>
                                </div>
                        </li>
                </ul>
        </div>
        <div class="right">
                <header>
                        <div class="right_left">
                                <img src="img/sangang.jpg" alt="">
                                <input type="text" placeholder="Enter keywords">
                        </div>
                        <div class="right_right">
                                <img src="img/header-1.jpg" alt="">
                                <img src="img/header-2.jpg" alt="">
                                <img src="img/header-3.jpg" alt="">
                                <img src="img/header-4.jpg" alt="">
                        </div>
                </header>
                <section>
                        <div class="box">
                                <p>
                                        <span class="box_one">Total Orders</span>
                                        <span class="box_two">8450</span>
                                </p>
                                <img src="img/gou-1.jpg" alt="">
                        </div>
                        <div style="background:#5e72e4;" class="box">
                                <p>
                                        <span class="box_one">Total Revenue</span>
                                        <span class="box_two">$750</span>
                                </p>
                                <img src="img/gou-2.jpg" alt="">
                        </div>
                        <div style="background:#f5365c;" class="box">
                                <p>
                                        <span class="box_one">New Users</span>
                                        <span class="box_two">620</span>
                                </p>
                                <img src="img/gou-3.jpg" alt="">
                        </div>
                        <div style="background:#11cdef;" class="box">
                                <p>
                                        <span class="box_one">Bounce Rate</span>
                                        <span class="box_two">12.80%</span>
                                </p>
                                <img src="img/gou-4.jpg" alt="">
                        </div>
                </section>
                <div class="shuju">
                        <div id="zhu" >
                        </div>
                        <div id="shan"></div>
                </div>
                <div class="shujulian">
                        <div id="shujulian" style="width:95%;height: 400px;"></div>
                </div>
                <div class="kuangjia">
                        <div class="kuangjia_left">
                                <p><span>New Customer List</span> <span>...</span> </p>
                                <p><span>PHOTO</span> <span>NAME</span> <span>USERNAME</span>
                                        <span>EMAIL</span>
                                </p>
                                <ul>
                                        <li><img src="img/renx.jpg" alt=""><span>Selina Jccoy</span>
                                                <span>@selina</span> <span>xyz@example.com</span></li>
                                        <li><img src="img/renx.jpg" alt=""><span>Selina Jccoy</span>
                                                <span>@selina</span> <span>xyz@example.com</span></li>
                                        <li><img src="img/renx.jpg" alt=""><span>Selina Jccoy</span>
                                                <span>@selina</span> <span>xyz@example.com</span></li>
                                        <li><img src="img/renx.jpg" alt=""><span>Selina Jccoy</span>
                                                <span>@selina</span> <span>xyz@example.com</span></li>
                                        <li><img src="img/renx.jpg" alt=""><span>Selina Jccoy</span>
                                                <span>@selina</span> <span>xyz@example.com</span></li>
                                </ul>
                        </div>
                        <div class="kuangjia_right">
                                <p><span>Social Traffic</span></p>
                                <ul>
                                        <li><img src="img/ffff.jpg" alt=""></li>
                                        <li><img src="img/ffff.jpg" alt=""></li>
                                        <li><img src="img/ffff.jpg" alt=""></li>
                                        <li><img src="img/ffff.jpg" alt=""></li>
                                        <li><img src="img/ffff.jpg" alt=""></li>
                                </ul>
                        </div>
                </div>
                <div class="quan">
                        <div class="box1">
                                <img src="img/quan.jpg" alt="">
                        </div>
                        <div class="box1">
                                <img src="img/quan.jpg" alt="">
                        </div>
                        <div class="box1">
                                <img src="img/quan.jpg" alt="">
                        </div>
                        <div class="box1">
                                <img src="img/quan.jpg" alt="">
                        </div>
                </div>
                <div class="input">
                        <p><span>Recent Orders Table</span> <span>...</span> </p>
                        <p><span>ACTION</span>
                                <span>PRODUCT</span>
                                <span>PHOTO</span>
                                <span>PRODUCT ID</span>
                                <span>STATUS</span>
                                <span>AMOUNT</span>
                                <span>COMPLETION</span>
                        </p>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                        <ul>
                                <li>
                                        <input type="checkbox"><span>Iphone 5</span><img src="img/phone.jpg" alt=""><span>#9405822</span><a
                                                href="">PAID</a><span>$ 1250.00</span><img src="img/tiao.jpg" alt="">
                                </li>
                        </ul>
                </div>
                <div class="foot">
                        <p> Copyright © 2018 Rukada Admin</p>
                </div>
        </div>

</body>

</html>
<script src="js/echarts.js"></script>
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/publick.js"></script>
<script type="text/javascript">
        window.onload = function () {
                zhu();
                shan();
                shujulian();
                fn();
        }
        //柱状图
        function zhu() {
                var myChart = document.getElementById('zhu');
                var myChart = echarts.init(document.getElementById('zhu'));
                var dataAxis = ['点', '击', '柱', '子', '或', '者', '两', '指', '在', '触', '屏', '上', '滑', '动', '能', '够', '自',
                        '动', '缩',
                        '放'
                ];
                var data = [220, 182, 191, 234, 290, 330, 310, 123, 442, 321, 90, 149, 210, 122, 133, 334, 198, 123,
                        125, 220
                ];
                var yMax = 500;
                var dataShadow = [];
                for (var i = 0; i < data.length; i++) {
                        dataShadow.push(yMax);
                }

                option = {
                        title: {
                                text: '特性示例：渐变色 阴影 点击缩放',
                                subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
                        },
                        xAxis: {
                                data: dataAxis,
                                axisLabel: {
                                        inside: true,
                                        textStyle: {
                                                color: '#fff'
                                        }
                                },
                                axisTick: {
                                        show: false
                                },
                                axisLine: {
                                        show: false
                                },
                                z: 10
                        },
                        yAxis: {
                                axisLine: {
                                        show: false
                                },
                                axisTick: {
                                        show: false
                                },
                                axisLabel: {
                                        textStyle: {
                                                color: '#999'
                                        }
                                }
                        },
                        dataZoom: [{
                                type: 'inside'
                        }],
                        series: [{ // For shadow
                                        type: 'bar',
                                        itemStyle: {
                                                normal: {
                                                        color: 'rgba(0,0,0,0.05)'
                                                }
                                        },
                                        barGap: '-100%',
                                        barCategoryGap: '40%',
                                        data: dataShadow,
                                        animation: false
                                },
                                {
                                        type: 'bar',
                                        itemStyle: {
                                                normal: {
                                                        color: new echarts.graphic.LinearGradient(
                                                                0, 0, 0, 1,
                                                                [{
                                                                                offset: 0,
                                                                                color: '#83bff6'
                                                                        },
                                                                        {
                                                                                offset: 0.5,
                                                                                color: '#188df0'
                                                                        },
                                                                        {
                                                                                offset: 1,
                                                                                color: '#188df0'
                                                                        }
                                                                ]
                                                        )
                                                },
                                                emphasis: {
                                                        color: new echarts.graphic.LinearGradient(
                                                                0, 0, 0, 1,
                                                                [{
                                                                                offset: 0,
                                                                                color: '#2378f7'
                                                                        },
                                                                        {
                                                                                offset: 0.7,
                                                                                color: '#2378f7'
                                                                        },
                                                                        {
                                                                                offset: 1,
                                                                                color: '#83bff6'
                                                                        }
                                                                ]
                                                        )
                                                }
                                        },
                                        data: data
                                }
                        ]
                };

                // Enable data zoom when user click bar.
                var zoomSize = 6;
                myChart.on('click', function (params) {
                        console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
                        myChart.dispatchAction({
                                type: 'dataZoom',
                                startValue: dataAxis[Math.max(params.dataIndex -
                                        zoomSize / 2,
                                        0)],
                                endValue: dataAxis[Math.min(params.dataIndex + zoomSize /
                                        2,
                                        data.length - 1)]
                        });
                });
                myChart.setOption(option);
                window.addEventListener("resize", function () {

                        myChart.resize();

                });
        }
        //饼状图
        function shan() {
                var myChart_shan = document.getElementById('shan');
                var myChart_shan = echarts.init(document.getElementById('shan'));
                option = {
                        title: {
                                text: '某站点用户访问来源',
                                subtext: '纯属虚构',
                                x: 'center'
                        },
                        tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                                orient: 'vertical',
                                left: 'left',
                                data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
                        },
                        series: [{
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                center: ['50%', '60%'],
                                data: [{
                                                value: 335,
                                                name: '直接访问'
                                        },
                                        {
                                                value: 310,
                                                name: '邮件营销'
                                        },
                                        {
                                                value: 234,
                                                name: '联盟广告'
                                        },
                                        {
                                                value: 135,
                                                name: '视频广告'
                                        },
                                        {
                                                value: 1548,
                                                name: '搜索引擎'
                                        }
                                ],
                                itemStyle: {
                                        emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                }
                        }]
                };
                myChart_shan.setOption(option);
                window.addEventListener("resize", function () {

                        myChart_shan.resize();

                });
        }
        //折线图
        function shujulian() {
                var myChart_shan = document.getElementById('shujulian');
                var myChart_shan = echarts.init(document.getElementById('shujulian'));
                option = {
                        xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                                type: 'value'
                        },
                        series: [{
                                data: [820, 932, 901, 934, 1290, 1330, 1320],
                                type: 'line',
                                areaStyle: {}
                        }]
                };
                myChart_shan.setOption(option);
                // myChart.setOption(option)；​
                window.addEventListener("resize", function () {

                        myChart_shan.resize();

                });
        }
        console.log(document.body.clientWidth);
</script>